<template>
  <div>
    <el-dialog title="数据字典子表列表" :visible.sync="isShow" width="1000px" :close-on-click-modal="false" @close="closeUserMod"
      @open="openUpdate">
      <div v-loading="loading">
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col  :lg="3" :md="2" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini"  icon='el-icon-plus' @click="createRole" 
          >新增</el-button>
        </el-col>
        <el-col  :lg="3" :md="2"  v-if="btnPermission('Button_User_Edit')">
          <el-button type="primary"
            size="mini" icon='el-icon-edit' :disabled="currentRow.length!=1"  @click="updateRole"
            >修改</el-button><!--  -->
        </el-col>
        <el-col :lg="3" :md="2" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger"
            size="mini" icon='el-icon-delete' :disabled="currentRow.length!=1" @click="delUser"
          >删除</el-button>
        </el-col>
        <el-col  :lg="3" :md="2" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini" icon= 'el-icon-circle-close'  @click="cancleUserMod"
          >关闭</el-button>
        </el-col>
      </el-row>
         <el-table :data="tableData" ref="table" border class="tableMarginTop"
        highlight-current-row
        @selection-change="handleCurrentChange"
        header-row-class-name="tableHeaderClass"
        style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop=	DictID label="DictID"></el-table-column>
        <el-table-column prop="DataKey" label="键"></el-table-column>
        <el-table-column prop="DataKeyVal" label="键值"></el-table-column>
        <el-table-column prop="Meaning" label="意义"></el-table-column>
        <el-table-column prop="PreserveFlag" :formatter="dataFormat" label="是否可维护"></el-table-column>
      </el-table>
       <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination  :current-page="currentPage" background
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="Total"
          @current-change="changePage">
        </el-pagination>
      </div>
      </el-card>
      </div>
    </el-dialog>
    <keep-alive>
      <component :is="dialogList.addbusinessTypeDialog" :option="dialogOptions" @refreshTable="Qrychannel"></component>
    </keep-alive>
      <keep-alive>
      <component :is="dialogList.update" :optionUpdate="dialogOptionsupdate"  @refreshTable="Qrychannel"></component>
    </keep-alive> 
  </div>
</template>

<script>
import addbusinessTypeDialog from "./dialog1/addchannel";
import update from "./dialog1/updatechannel";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import request from "@/common/utils/request";
import query from "@/message/reservationsManage/ListBusiType_Fill/ListBusiType-Fill-query";
import delet from "@/message/reservationsManage/ListBusiType_Fill/ListBusiType-Fill-delet";
import QryDataDict from "@/message/basicmanagement/datadictionary/data-dictionary-QryDataDict";
import del from "@/message/basicmanagement/datadictionary/data-dictionary-del";
export default {
  name: "",
  data() {
    return {
      loading: false,
      operType: "",
       PreserveFlag: [],
      BusinessList: [],
      pageSize: undefined, //表格每页的条数
      currentPage: 1, //表格当前页
      currentRow: [], //表格当前选中行
      tableData: [], //表格 数据
        Total: 0,
      dialogList: {
        //指定被渲染组件列表
        addbusinessTypeDialog,
        update
      },
      dialogOptions: {
        //新增
        isShow: false
      },
      dialogOptionsupdate: {
        //修改
        isShow: false,
        currentRow: []
      },
      newUserDate: {
        //表单信息
        BsID: "",
        name: "",
        BsName: "",
        BsAttr: "",
        Business1: ""
      },
      rules: {
        //表单校验规则
      }
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //修改用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  methods: {
     dataFormat(row, column) {
      //格式化表格
      if (column.property == "PreserveFlag")
        return this.PreserveFlag[row[column.property]];
    },
    createRole() {
      //添加
      this.dialogOptions.isShow = true;
      this.dialogOptions.currentRow = this.option.currentRow;
    },
    updateRole() {
      //修改
      this.dialogOptionsupdate.isShow = true;
      this.dialogOptionsupdate.currentRow = this.currentRow;
      this.dialogOptionsupdate.isDisabled = true;
    },
    Qrychannel() {
      let resBody = new QryDataDict();
      resBody.data.DataKey = this.option.currentRow[0].DataKeyVal;
      resBody.data.CurtPage = this.currentPage;
      resBody.data.PageSize = this.pageSize;
      resBody.data.StartRows = (this.currentPage - 1) * this.pageSize;
      request(resBody).then(response => {
        if (response.APP_HEAD.ReturnCode === "000000") {
          this.tableData = response.RspInfo.Result;
          console.log(this.tableData);
            this.Total = response.RspInfo.TotalRcrdNum; 
        } 
      });
    },
    handleCurrentChange(val) {
      //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
      this.currentRow = val;
    },
    openUpdate() {
      //打开弹窗事件
      this.PreserveFlag = getGlobalParams.get("PreserveFlag");
      this.pageSize = getGlobalParams.get("PageSize");
      this.Qrychannel();
      console.log(this.option.currentRow);
      this.newUserDate.IdName = this.option.currentRow[0].DataKeyVal;
    },
    cancleUserMod() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
    },
    changePage(val) {
      this.currentPage = val;
      this.Qrychannel();
    },
    closeUserMod() {
      //修改弹窗关闭
      //关闭弹窗清楚表单数据并清楚表单验证
      this.tableData = [];
      this.Total = 0;
      this.$emit("refreshTable");
    },
    delUser() {
      //删除弹出
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.Del();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    Del() {
      //删除
      this.loading = true;
      let resBody = new del();
     resBody.data.DictID = this.currentRow[0].DictID;
      resBody.data.DataKey = this.currentRow[0].DataKey;
      resBody.data.DataKeyVal = this.currentRow[0].DataKeyVal;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.Qrychannel();
          } else {
            this.loading = false;
            this.$message({
              type: "warning",
              message: "删除失败!"
            });
          }
        })
        .catch(error => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-dialog__body {
  padding: 20px;
  padding-top: 10px;
}

.el-card {
  overflow: inherit;
}
</style>
